<template>
    <div class="login-tem">
        <div class="user-msg-tem">
            <div class="user-top">
                <i class="fa fa-user-circle-o"></i>
                <p>用户登录</p>
            </div>
            <a-form :form="form" @submit="handleSubmit" layout="horizontal">
                <a-form-item>
                    <a-input
                            class="user-name"
                            placeholder="admin"
                            v-decorator="[
                            'userName',
                            { rules: [{ required: true, message: '请输入邮箱账号!' }] }]"
                    >
                        <a-icon type="user" slot="prefix"/>
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input
                            class="user-password"
                            placeholder="123"
                            type="password"
                            v-decorator="[
                            'password',
                            { rules: [{ required: true, message: '请输入密码!' }] }]"
                    >
                        <a-icon type="lock" slot="prefix"/>
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit" class="login-btn" :loading="loginBn">登录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "logIn",
        data() {
            return {
                form: this.$form.createForm(this),
                loginBn: false
            };
        },
        methods: {
            handleSubmit(e) {
                const that = this
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    console.log(values)
                    if (!err) {
                        that.loginBn = true
                        //调接口接口返回200然后跳转页面
                        that.$router.push("/Home")
                    }
                });
            }
        },
    }
</script>

<style scoped lang="scss">
    .login-tem {
        background: -webkit-linear-gradient(left top, #efe68e, #8ba26e); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom right, #efe68e, #8ba26e); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom right, #efe68e, #8ba26e); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom right, #efe68e, #8ba26e); /* 标准的语法 */
        .user-msg-tem {
            width: 350px;
            height: 350px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -175px 0 0 -175px;
            .user-top{
                text-align: center;
                i{
                    font-size: 70px;
                    color: #fff;
                }
                p{
                    font-size: 24px;
                    color: #fff;
                    margin-bottom: 10px;
                }
            }
            .user-name,
            .user-password {
                height: 50px;
            }

            .login-btn {
                width: 100%;
                height: 50px;
                font-size: 16px;
                font-weight: bold;
                background-color: #ff8346;
                border-color: #ff8346;
            }

        }
    }
</style>